<template>
	<div class="page">
		<div class="favorite-tabs flex a-c">
			<!-- 商品 -->
			<div class="c-p plr-12 favorite-item flex a-c j-c f-18 lin-18 pos-r" @click="tabChange('goods')">
				{{$t('user.product')}}
				<div class="pos-a br-4 item-link" :class="{'favorite-active':tabValue == 'goods'}"></div>
			</div>
			<!-- 店铺 -->
			<div class="c-p plr-12 favorite-item flex a-c j-c f-18 lin-18 pos-r ml-48" @click="tabChange('store')">
				{{$t('store.storeShop')}}
				<div class="iconfont ml-4 item-help" @click.stop="appShow">&#xe620;</div>
				<div class="pos-a br-4 item-link" :class="{'favorite-active':tabValue == 'store'}"></div>
			</div>
		</div>
		<div class="content">
			<shop v-show="tabValue == 'store'"></shop>
			<product v-show="tabValue == 'goods'"></product>
		</div>
		<store-app ref="appRef"></store-app>
	</div>
</template>

<script>
	import Shop from "./favorite/shop";
	import Product from "./favorite/product";
	import storeApp from "./favorite/store-app";
	
	export default {
		name: "points",
		components: {
			Product,
			Shop,
			storeApp
		},
		data() {
			return {
				tabValue: 'goods',
			}
		},
		methods: {
			//tab切换
			tabChange(key) {
				if (this.tabValue != key) {
					this.tabValue = key;
				}
			},
			//显示app下载二维码
			appShow(){
				this.$refs.appRef.open();
			}
		}
	}
</script>

<style scoped lang="less">
	.page {
		.favorite-tabs {
			height: 50px;
			width: 100%;
			box-sizing: border-box;
			border-bottom: 1px solid #F1F2F7;

			.favorite-item {
				height: 100%;

				.item-link {
					height: 4px;
					width: 100%;
					left: 0;
					bottom: 0;
					background: transparent;
				}

				.favorite-active {
					transition: all 0.6s ease;
					background: #FF186B;
				}

				.item-help {
					color: #AEB0B9;
					font-size: 20px;
					line-height: 20px;
				}
			}
		}
		.content {
			margin-top: 24px;
			padding-bottom: 24px;
		}
	}
</style>